<style lang="scss" scoped>
.hy-empty {
  margin: 0 8px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  user-select: none;
  color: currentColor;

  &.hy-empty-normal {
    margin: 32px 0;

    .hy-empty-image {
      height: 40px;
      font-size: 60px;
    }
  }

  .hy-empty-image {
    height: 200px;

    svg {
      height: 100%;
      margin: auto;
    }
  }

  .hy-empty-description {
    margin: 0;
  }
}
</style>
<template>
  <div class="hy-empty hy-empty-normal" :style="{ color: color }">
    <div class="hy-empty-image" :style="{height: `${size}px`}">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 40 40">
        <path fill="currentColor"
              d="M36.611 34.313H3.389c-2.084 0-2.867-1.762-2.989-2.692l-.004-11.79a.52.52 0 0 1 .034-.182L5.093 7.661a3.132 3.132 0 0 1 3.02-1.974h23.758a3.15 3.15 0 0 1 3.043 1.992l4.655 11.97a.52.52 0 0 1 .034.182v11.725c-.125.996-.907 2.757-2.992 2.757M1.396 19.925v11.631c.021.119.301 1.758 1.993 1.758h33.222c1.738 0 1.986-1.748 1.996-1.822l-.004-11.566l-4.628-11.9c-.025-.069-.502-1.337-2.087-1.337H8.131c-1.629 0-2.094 1.304-2.099 1.317z"/>
        <path fill="currentColor"
              d="M27.166 22.618h-14.33a.502.502 0 0 1-.497-.553c.122-1.151-.032-2.005-.449-2.468c-.412-.458-1.044-.423-1.101-.419l-5.573.005a.5.5 0 0 1-.464-.683l3.489-8.814a.5.5 0 0 1 .465-.316h22.588a.5.5 0 0 1 .465.316l3.441 8.695a.5.5 0 0 1-.398.803h-5.524c-.077-.006-.115-.009-.171-.009c-.231 0-.666.055-.997.423c-.416.464-.571 1.316-.448 2.468a.496.496 0 0 1-.496.552m-13.792-1h13.253c-.048-1.186.2-2.089.739-2.688c.815-.906 1.984-.74 1.983-.741l4.697-.004l-3.093-7.815H9.046l-3.093 7.815h4.749c.015-.003.09-.009.192-.009c.397 0 1.149.098 1.74.754c.539.599.788 1.502.74 2.688"/>
      </svg>
    </div>
    <p class="hy-empty-description">{{ description }}</p>
  </div>
</template>
<script>
const oneOf = (target, list) => {
  return list.some(item => item === target);
};

export default {
  name: 'Empty',
  props: {
    size: {
      type: Number,
      default: 100
    },
    color: {
      type: String,
      default: 'rgba(0,0,0,0.25)'
    },
    description: {
      type: String,
      default: ''
    }
  }
};
</script>
